<template>
	<view>
		<view class="body after-navber">
		    <view class="info">
		        <view class="info-list" style="width: 100%">
		            <view class="info-one"  v-for="(coupon, index) in coupon_list" :key="coupon.id">
		                <image src="/static/images/lKf67CtwN3BksxWm.png" v-if="coupon.is_receive == 0"></image>
		
		                <image src="/pages2/static/images/icon-coupon-disabled.png" v-if="coupon.is_receive == 1"></image>
		
		                <view class="info-content flex-row flex-x-center flex-y-center fs-b">
		                    <navigator
		                        class="info-content flex-row flex-x-center flex-y-center"
		                        openType="navigateTo"
		                        :url="'/pages/coupon-detail/coupon-detail?coupon_id=' + coupon.id"
		                    >
		                        <view class="flex-grow-0">
		                            <view class="flex-row flex-y-bottom">
		                                <view class="flex-grow-0">￥</view>
		                                <view class="flex-grow-1" style="font-size: 23pt">{{ coupon.money }}</view>
		                            </view>
		                        </view>
		                        <view class="flex-grow-1">
		                            <view style="margin-left: 16rpx">
		                                <view style="margin-bottom: 4rpx">优惠券</view>
		                                <view>满{{ coupon.man }}可用</view>
		                            </view>
		                        </view>
		                    </navigator>
		                    <view class="flex-grow-0">
		                        <view
		                            @tap="receive"
		                            class="flex-x-center flex-y-center info-btn fs-sm"
		                            :data-index="coupon.id"
		                            style="color: #ff4544"
		                            v-if="coupon.is_receive == 0"
		                        >
		                            立即领取
		                        </view>
		                        <view class="flex-x-center flex-y-center info-btn fs-sm" style="color: #999" v-if="coupon.is_receive == 1">已领取</view>
		                    </view>
		                </view>
		
		                <view class="info-footer fs-sm">
		                    <view class="info-day">领取时间 ：{{ coupon.start_time }}-{{ coupon.end_time }}</view>
		                    <view class="info-day" >有效日期：领取{{ coupon.expir_day }}天内有效</view>
		                    <view>
		                        <view @tap="goodsList" :data-goods="coupon.goods" v-if="coupon.appoint_type == 2 && coupon.goods.length > 0">指定商品使用 点进去查看指定商品</view>
		                        <view v-else>{{ coupon.content }}</view>
		                    </view>
		                </view>
		            </view>
		        </view>
		        <view class="flex-x-center" v-if="coupon_list.length <= 0">
		            <text style="margin-top: 50rpx">暂无优惠券</text>
		        </view>
		    </view>
		</view>
		<view class="get-coupon flex-y-center flex-x-center" v-if="get_coupon_list && get_coupon_list.length > 0">
		    <view class="get-coupon-box" style="overflow: visible">
		        <image class="get-coupon-bg" mode="widthFix" src="/static/images/SDIltcR65kWuXUid.png"></image>
		        <view class="flex-x-center mb-20">
		            <image
		                src="/static/images/icon-receive-coupon.png"
		                style="width: 226rpx; height: 51rpx"
		            ></image>
		        </view>
		        <scroll-view class="coupon-list" :scrollY="true">
		            <view class="coupon-item flex-y-center" v-for="(item, index) in get_coupon_list" :key="index">
		                <image mode="widthFix" src="/static/images/cIFMa87jekuH3TYv.png" style="width: 100%; height: 100%"></image>
		
		                <view style="width: 100%">
		                    <view class="flex-row flex-y-center">
		                        <view class="flex-grow-1 flex-row flex-y-bottom">
		                            <view style="line-height: 1">￥</view>
		                            <view style="font-size: 23pt; line-height: 0.85">{{ item.money }}</view>
		                        </view>
		                        <view class="flex-grow-0" style="font-size: 9pt; line-height: 32rpx">满{{ item.man }}元可用</view>
		                    </view>
		                    <view @tap="hideGetCoupon" class="use-now" :data-url="item.url">立即使用</view>
		                    <view style="font-size: 9pt">{{ item.content }}</view>
		                </view>
		            </view>
		        </scroll-view>
		        <view class="flex-x-center">
		            <image @tap="closeCouponBox" src="/static/images/icon-close3.png" style="width: 100rpx; height: 100rpx"></image>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import {My} from '../../../apirequest/my-model.js';
	var m = new My();
	export default {
		data() {
			return {
				coupon_list:[],
				get_coupon_list:[]
		
				
			}
		},
		onLoad() {
			this._index();
		},
		methods: {
			_index(){
				var that = this;
				m.get_coupon_list({},(res) => {
					if(res.code = 1){
						that.coupon_list = res.data.first.concat(res.data.end)
					
					}
				})
			},
			receive: function (t) {
			    var that = this;
			    var id = t.target.dataset.index;
				m.get_coupon({id:id},(res) => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						that._index()
						that.get_coupon_list = [res.data]
					}
				})
		
			},
			hideGetCoupon(){
				uni.switchTab({
			
					url:"/pages/shop/index/index"
				})
			},
			closeCouponBox: function (t) {
				this.get_coupon_list=''
			},
		}
	}
</script>

<style>
.info {
    padding: 20rpx;
    width: 100%;
}

.info-one {
    position: relative;
    width: 100%;
    margin-bottom: 20rpx;
    z-index: 10;
}

.info-one image {
    width: 100%;
    height: 160rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.info-content {
    height: 160rpx;
    width: 100%;
    color: #fff;
    padding: 0 24rpx;
    line-height: 1;
    position: relative;
}

.info-btn {
    background-color: #fff;
    width: 160rpx;
    height: 56rpx;
    border-radius: 28rpx;
}

.info-footer {
    background-color: #fff;
    padding: 24rpx 24rpx 32rpx 24rpx;
    border-radius: 0 0 16rpx 16rpx;
    border: 1rpx solid #cfcfcf;
    border-top: none;
    color: #666;
}
.get-coupon {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 999;
}

.get-coupon .get-coupon-box {
    position: relative;
    width: 100%;
}

.get-coupon .get-coupon-bg {
    width: 100%;
    position: absolute;
    left: 0;
    top: -210rpx;
    z-index: -1;
}

.get-coupon .coupon-list {
    height: 330rpx;
    width: 550rpx;
    margin: 0 auto;
}

.get-coupon .coupon-item {
    width: 520rpx;
    height: 264rpx;
    margin-bottom: 20rpx;
    position: relative;
    color: #fff;
    padding: 0 40rpx;
}

.get-coupon .coupon-item image {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
}

.get-coupon .coupon-item:last-child {
    margin-bottom: 0;
}

.get-coupon .use-now {
    display: block;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    color: #ff4544;
    background: #fff;
    border-radius: 6rpx;
    margin: 15rpx 0;
    font-size: 9pt;
}
</style>
